<template>
  <el-main class="homePageMain">
        <div class="controlPanel">
          <h2 style="font-weight:normal">控制面板</h2>
          <!-- <el-button type="info" @click="loginOut">退出</el-button> -->
        </div>
      
    <div class="position">
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="grid-content bg-purple">请选择省份</div>
          <el-select v-model="value" disabled placeholder="广东省">
          </el-select>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">请选择市</div>
          <el-select v-model="value" placeholder="中山市">
            <!-- <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option> -->
          </el-select>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">请选择区</div>
          <el-select v-model="value" placeholder="黄圃镇">
            <!-- <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option> -->
          </el-select>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">请选择市场</div>
          <el-select v-model="value" placeholder="汾江市场">
            <!-- <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option> -->
          </el-select>
        </el-col>
      </el-row>
    </div>

    <div>
        <div class="sellBody">
          <div class="sell">
            <div class="sellTitle">今日鸽子累计销量</div>
            <el-card shadow="never">
            <h2 class="sellNumber">0</h2>
            </el-card>
          </div>
          <div class="sell">
            <div class="sellTitle">今年全部累计销量</div>
            <el-card shadow="never">
            <h2 class="sellNumber">36</h2>
            </el-card>
          </div>
          <div class="sell">
            <div class="sellTitle">今年鸡累计销量</div>
            <el-card shadow="never">
            <h2 class="sellNumber">36</h2>
            </el-card>
          </div>
          <div class="sell">
            <div class="sellTitle">今年鹅累计销量</div>
            <el-card shadow="never">
            <h2 class="sellNumber">0</h2>
            </el-card>
          </div>
          <div class="sell">
            <div class="sellTitle">今年鸭累计销量</div>
            <el-card shadow="never">
            <h2 class="sellNumber">0</h2>
            </el-card>
            </div>
        </div> 
    </div>

    <!-- 设备状态 -->
    <div class="equipmentStatus">
      <el-card class="equipmentStatusPic">
        <span>设备状态图</span>
        <router-view></router-view>
      </el-card>
      <el-card class="equipmentStatusList">
        <span>设备状态表</span>
        <router-view></router-view>
      </el-card>
    </div>

    <!-- 禽类销售状态 -->
    <div class="poultrySalesStatus">
      <el-card class="poultrySalesStatusPic">
        <span>禽类销售状态图</span>
        <router-view></router-view>
      </el-card>
      <el-card class="poultrySalesStatusList">
        <span>禽类销售状态表</span>
        <router-view></router-view>
      </el-card>
    </div>

  </el-main>
</template>

<script>
export default {
  data(){
    return{
      value:''
    }
  }
}
</script>

<style lang="less" scoped>

.controlPanel{
  padding:0px !important;
  display: flex;
  justify-content:space-between;
}

.homePageMain{
  padding:0px !important;
  h2{
    padding-left:15px !important;
    padding-top:0px !important;
  }
}

.position{
  padding:15px !important;
  .bg-purple{
  color:rgb(49, 58, 70) !important;
}
}

.position .el-select{
  margin-top:15px !important;
  // 修改选择框默认值的字体颜色
  input::-webkit-input-placeholder {
    color: rgb(49, 58, 70)
  }
  input::-moz-input-placeholder {
    color:rgb(49, 58, 70)
  }
  input::-ms-input-placeholder {
    color:rgb(49, 58, 70)
  }
}

.sellBody{
  margin-left:3% !important;
  margin-right:6% !important;
  height:10% !important;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items:center;
  justify-content:center;
}

.sellBody .el-card__body {
    padding: 5% !important;
}

.sell{
  width:100% !important;
  text-align: center;
  border:1px solid #4eb7eb;
  border-radius:3px;
}

.sellTitle{
  background-color: #e3eaef;
  border-bottom-color: #d3dee6;
  padding:8% !important;
}

.sellNumber{
  color: #4eb7eb !important;
  padding-left:0 !important;
}

// 设备状态
.equipmentStatus{
  display: flex;
}

// 设备状态图
.equipmentStatusPic{
  width: 40%;
  margin-top:20px;
  margin-left:35px;
}

// 设备状态表
.equipmentStatusList{
  width: 40%;
  margin-top:20px;
  margin-left:100px;
}

// 禽类销售状态
.poultrySalesStatus{
  display:flex;
}

// 禽类销售状态图
.poultrySalesStatusPic{
  width: 40%;
  margin-top:20px;
  margin-left:35px;
}

// 禽类销售状态表
.poultrySalesStatusList{
  width: 40%;
  margin-top:20px;
  margin-left:100px;
}


</style>